<div class="content">
  <div class="choose">
    <div class="h3">新增加工屬性</div>
    <!-- 机台 -->
    <div style="flex-direction: row;flex-wrap: wrap;display: flex;">
      <div class="input_first" style="margin-left: 40px;padding-left:32px;">
        CNC機臺：&nbsp;<input type="text" value='' name='' [(ngModel)]='name' readonly="true">
      </div>
    </div>
    <!-- 直径 长 宽 -->
    <div style="flex-direction: row;flex-wrap: wrap;display: flex;margin-top: 20px;">
      <div class="input_first" style="margin-left: 40px;padding-left:68px;">
        直徑：&nbsp;<input type="text" value='' name='' [(ngModel)]='diameter_max'>
      </div>
      <div class="input_first" style="margin-left: 90px;">
        長：<input type="text" name='' [(ngModel)]='length_max'>
      </div>
      <div class="input_first" style="margin-left: 0px;">
        寬：<input type="text" name='' [(ngModel)]='width_max'>
      </div>
    </div>
    <!-- 材质类型 -->
    <div style="flex-direction: row;flex-wrap: wrap;display: flex;margin-top: 20px;">
      <div class="input_first" style="margin-left: 40px;padding-left:32px;">
        材質類型：&nbsp;<input type="text" value='' name='' [(ngModel)]='stuff_type'>
      </div>
    </div>
    <!-- 材质范围 -->
    <div style="flex-direction: row;flex-wrap: wrap;display: flex;margin-top: 20px;">
      <div class="textArea">
        材質範圍：&nbsp;<textarea rows="4" nz-input [(ngModel)]='stuff_range'></textarea>
      </div>
    </div>
    <!-- 分割线 -->
    <div class="wrap"></div>
    <!-- 按钮 -->
    <div style="width: 100%;display: flex;padding:25px 0 ;">
      <div style="margin:0 auto;height: 32px;">
        <!-- 清除按钮 -->
        <button class="clear" (click)="clear()"></button>
        <!-- 查詢按钮 -->
        <button class="save" (click)="save()"></button>
      </div>
    </div>
  </div>
  <!-- table -->
    <nz-table #groupingTable [nzShowPagination]=false nzSize="middle" [nzData]="listOfData"
      [nzWidthConfig]="widthConfig" [nzScroll]="scrollConfig">
      <thead>
        <tr>
          <th>CNC機臺</th>
          <th>直徑</th>
          <th>長</th>
          <th>寬</th>
          <th>材質類型</th>
          <th>材質範圍</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr class="tr_hover" *ngFor="let data of listOfData,let Key = index" (click)="edit(data)">
          <td>{{data.name}}</td>
          <td>{{data.diameter_max}}</td>
          <td>{{data.length_max}}</td>
          <td>{{data.width_max}}</td>
          <td>{{data.stuff_type}}</td>
          <td style="max-width: 350px; overflow: hidden; white-space: nowrap;text-overflow: ellipsis;" title="{{ data.stuff_range }}">{{data.stuff_range}}</td>
          <td>
            <a class="del"  (click)="showModal(data)"></a>
          </td>
        </tr>
      </tbody>
    </nz-table>
    <!-- 弹出框 -->
  <nz-modal [(nzVisible)]="isVisible" nzTitle="刪除" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
  [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
  [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',fontWight:'300',textAlign:'center',lineHeight:'200px'}">
  <p style="font-size: 20px;">確定刪除嗎？</p>
  </nz-modal>
</div>
